<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="天地图" />
    <title>天地图－地图API－范例－H5定位</title>
    <script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=10e41a3ff76854cfbd835125fd3a53f6"></script>
    <style type="text/css">
      body,
      html {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "Microsoft YaHei";
      }
      #mapDiv {
        width: 100%;
        height: 400px;
      }
      input,
      b,
      p {
        margin-left: 5px;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div id="mapDiv"></div>
    <p>本示例演示如用H5定位所在城市</p>
    <div id="addressMsg" style="font-size:14px"></div>
    <br/>
    <div id="detailedAddress" style="font-size:14px"></div>

    <script>
      function showError(error) {
        switch (error.code) {
          case error.PERMISSION_DENIED:
            alert("定位失败,用户拒绝请求地理定位");
            break;
          case error.POSITION_UNAVAILABLE:
            alert("定位失败,位置信息是不可用");
            break;
          case error.TIMEOUT:
            alert("定位失败,请求获取用户位置超时");
            break;
          case error.UNKNOWN_ERROR:
            alert("定位失败,定位系统失效");
            break;
        }
      }

      function showPosition(position) {

        var lat = position.coords.latitude; //纬度
        var lag = position.coords.longitude; //经度
        alert("纬度:" + lat + ",经度:" + lag);
        // onLoad(lat, lag)
      }

      function getLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
          alert("浏览器不支持地理定位。");
        }
      }
      

      var map;
      var zoom = 12;
      var geocode;
      var lnglat;
      function MapClick(e) {
        // alert(e.lnglat.getLng() + "," + e.lnglat.getLat());
        // lnglat = e.lnglat
        map.clearOverLays();
        var lnglat = {
          lat: e.lnglat.getLat(),
          lng: e.lnglat.getLng()
        }
        var marker = new T.Marker(lnglat);
        map.addOverLay(marker);
        geocode.getLocation(e.lnglat, searchResult);
      }
      function onLoad(lat, lag) {
        //初始化地图对象
        map = new T.Map("mapDiv");
        geocode = new T.Geocoder();
        // 允许地图点击
        map.addEventListener("click", MapClick);
        // 允许地图滚轮缩放
        map.enableScrollWheelZoom();
        //设置显示地图的中心点和级别
        map.centerAndZoom(
          new T.LngLat(117.13172921494441, 31.83319347276248),
          zoom
        );
        // var lo = new T.Geolocation();
        // fn = function (e) {
        //     if (this.getStatus() == 0){
        //         map.centerAndZoom(e.lnglat, 15)
        //         alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
        //         var marker = new T.Marker(e.lnglat);
        //         map.addOverLay(marker);

        //     }
        //     if(this.getStatus() == 1){
        //         map.centerAndZoom(e.lnglat, e.level)
        //         alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
        //         debugger
        //         var marker = new T.Marker(e.lnglat);
        //         map.addOverLay(marker);
        //     }
        // }
        // lo.getCurrentPosition(fn);

        var marker = new T.Marker({
          lat: 31.83319347276248,
          lng: 117.13172921494441,
        });
        map.addOverLay(marker);
      }


      function searchResult(result)
        {
            if(result.getStatus() == 0)
            {
                document.getElementById("addressMsg").innerHTML = "<font style='font-weight:700'>详细地址：</font>"+result.getAddress();

                var addressComponent = result.getAddressComponent();

                var html = "<font style='font-weight:700'>详细信息如下：</font><br/>";
                html += "<font style='font-size:12px'>此点最近地点信息："+addressComponent.address+"</font><br/>";
                html += "<font style='font-size:12px'>此点距离最近地点信息距离："+addressComponent.address_distance+"米</font><br/>";
                html += "<font style='font-size:12px'>此点在最近地点信息方向："+addressComponent.address_position+"</font><br/>";
                html += "<font style='font-size:12px'>此点所在国家或城市或区县："+addressComponent.city+"</font><br/>";
                html += "<font style='font-size:12px'>距离此点最近poi点："+addressComponent.poi+"</font><br/>";
                html += "<font style='font-size:12px'>距离此点最近poi点的距离："+addressComponent.poi_distance+"米</font><br/>";
                html += "<font style='font-size:12px'>此点在最近poi点的方向："+addressComponent.poi_position+"</font><br/>";
                html += "<font style='font-size:12px'>距离此点最近的路："+addressComponent.road+"</font><br/>";
                html += "<font style='font-size:12px'>此点距离此路的距离："+addressComponent.road_distance+"米</font><br/>";
                document.getElementById("detailedAddress").innerHTML = html;
            }
            else
            {
                document.getElementById("addressMsg").innerHTML = "<font style='font-weight:700'>服务器返回状态：</font>"+result.getStatus();
                document.getElementById("detailedAddress").innerHTML = "<font style='font-weight:700'>服务器返回响应信息：</font>"+result.getMsg();
            }
        }
    
      // getLocation();

      onLoad()
    </script>
  </body>
</html>
